import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface ServiceVoucher {
    id: string;
    name: string;
    validUntil: string;
    status: 'unused' | 'used' | 'expired';
    value: number;
}

const FuwuScreen = () => {
    const vouchers: ServiceVoucher[] = [
        {
            id: '1',
            name: '全身按摩服务',
            validUntil: '2024-12-31',
            status: 'unused',
            value: 299,
        },
        {
            id: '2',
            name: '足部按摩服务',
            validUntil: '2024-12-31',
            status: 'unused',
            value: 199,
        },
        {
            id: '3',
            name: '肩颈按摩服务',
            validUntil: '2024-12-31',
            status: 'used',
            value: 159,
        },
    ];

    const renderVoucherItem = ({ item }: { item: ServiceVoucher }) => (
        <TouchableOpacity style={styles.voucherCard}>
            <View style={styles.voucherHeader}>
                <Text style={styles.voucherName}>{item.name}</Text>
                <Text style={[
                    styles.voucherStatus,
                    item.status === 'unused' ? styles.unusedStatus :
                        item.status === 'used' ? styles.usedStatus :
                            styles.expiredStatus
                ]}>
                    {item.status === 'unused' ? '未使用' :
                        item.status === 'used' ? '已使用' : '已过期'}
                </Text>
            </View>

            <View style={styles.voucherBody}>
                <View style={styles.valueContainer}>
                    <Text style={styles.valueSymbol}>¥</Text>
                    <Text style={styles.valueNumber}>{item.value}</Text>
                </View>
                <Text style={styles.validUntil}>有效期至：{item.validUntil}</Text>
            </View>

            <View style={styles.voucherFooter}>
                <TouchableOpacity
                    style={[
                        styles.useButton,
                        item.status !== 'unused' && styles.disabledButton
                    ]}
                    disabled={item.status !== 'unused'}
                >
                    <Text style={[
                        styles.useButtonText,
                        item.status !== 'unused' && styles.disabledButtonText
                    ]}>立即使用</Text>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>
    );

    return (
        <View style={styles.container}>
            <FlatList
                data={vouchers}
                renderItem={renderVoucherItem}
                keyExtractor={item => item.id}
                contentContainerStyle={styles.listContainer}
                showsVerticalScrollIndicator={false}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    listContainer: {
        padding: 15,
    },
    voucherCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 15,
        padding: 15,
        elevation: 2,
    },
    voucherHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 15,
    },
    voucherName: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
    },
    voucherStatus: {
        fontSize: 12,
        paddingHorizontal: 8,
        paddingVertical: 4,
        borderRadius: 10,
    },
    unusedStatus: {
        backgroundColor: '#e6f7ff',
        color: '#1890ff',
    },
    usedStatus: {
        backgroundColor: '#f5f5f5',
        color: '#999',
    },
    expiredStatus: {
        backgroundColor: '#fff1f0',
        color: '#ff4d4f',
    },
    voucherBody: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 15,
    },
    valueContainer: {
        flexDirection: 'row',
        alignItems: 'baseline',
    },
    valueSymbol: {
        fontSize: 16,
        color: '#ff9500',
        marginRight: 2,
    },
    valueNumber: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#ff9500',
    },
    validUntil: {
        fontSize: 12,
        color: '#999',
    },
    voucherFooter: {
        borderTopWidth: 1,
        borderTopColor: '#f5f5f5',
        paddingTop: 15,
    },
    useButton: {
        backgroundColor: '#ff9500',
        borderRadius: 5,
        paddingVertical: 8,
        alignItems: 'center',
    },
    useButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    disabledButton: {
        backgroundColor: '#f5f5f5',
    },
    disabledButtonText: {
        color: '#999',
    },
});

export default FuwuScreen; 